import { useState } from 'react'
import {
  NavBar,
  Icon,
  InputItem,
  WingBlank,
  WhiteSpace,
  Button,
  Toast,
} from 'antd-mobile'
import { Link } from 'react-router-dom'

import { reqPassowordLogin } from '../../../api/login'
import { phoneReg } from '../../../utils/regs'

import './index.less'

function PasswordLogin({ history }) {
  //手机号
  const [phone, setPhone] = useState('')
  //密码
  const [password, setPassword] = useState('')
  //手机号验证通过则启用登录按钮
  const [isPhoneDisabled, setIsPhoneDisabled] = useState(true)
  //有输入密码则启用登录按钮
  const [isPasswordDisabled, setIsPasswordDisabled] = useState(true)

  //手机号改变触发事件
  const handlePhoneChange = (val) => {
    setPhone(val)
    phoneReg.test(val) ? setIsPhoneDisabled(false) : setIsPhoneDisabled(true)
  }

  //密码改变触发事件
  const handlePasswordChange = (val) => {
    setPassword(val)
    val ? setIsPasswordDisabled(false) : setIsPasswordDisabled(true)
  }

  //发送请求，使用手机号及密码登录
  const passwordLogin = async () => {
    try {
      const res = await reqPassowordLogin(phone, password)
      if (res.data.code === 20000) {
        history.push('/', res.data.data.user)
      } else {
        Toast.fail(res.data.message, 2)
      }
    } catch (err) {
      Toast.fail('请求失败...', 2)
    }
  }

  return (
    <div className="login container">
      <NavBar
        mode="light"
        icon={
          <Icon className="left-icon" type="left" style={{ color: '#000' }} />
        }
        onLeftClick={() => history.goBack()}
      >
        硅谷注册登录
      </NavBar>
      <WhiteSpace size="xl" />
      <WingBlank size="lg">
        <InputItem
          clear
          placeholder="用户名/邮箱/手机号"
          value={phone}
          onChange={handlePhoneChange}
        />
        <WhiteSpace size="lg" />
        <div className="login-code">
          <InputItem
            clear
            placeholder="请输入密码"
            type="password"
            value={password}
            onChange={handlePasswordChange}
            extra={<span className={'iconfont icon-eye1'}></span>}
          />
          <button
            className="login-btn-text login-btn"
            style={{ color: '#000' }}
          >
            忘记密码
          </button>
        </div>
        <WhiteSpace size="lg" />
        <WingBlank size="lg">
          <Button
            type="primary"
            className="btn"
            disabled={isPhoneDisabled || isPasswordDisabled}
            onClick={passwordLogin}
          >
            登录
          </Button>
        </WingBlank>
        <WhiteSpace size="lg" />
        <div className="login-btn-wrap">
          <Link to="/login/code" className="login-btn-text">
            短信验证码登录
          </Link>
          <Link to="/register/phone" className="login-btn-text">
            手机快速注册
          </Link>
        </div>
        <div className="login-other-text">其他登录方式</div>
        <div className="login-icons">
          <span className="iconfont icon-gitee-fill-round"></span>
          <span className="iconfont icon-qq"></span>
          <span className="iconfont icon-wechat"></span>
        </div>
        <span className="login-private-policy">
          未注册的手机号验证后将自动创建硅谷账号, 登录即代表您已同意
          <span className="login-private-policy-btn">硅谷隐私政策</span>
        </span>
      </WingBlank>
    </div>
  )
}

export default PasswordLogin
